<script setup>
import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
import {
  NButton,
  NCheckbox,
  NInput,
  NTag,
  useMessage,
  NFlex,
  NAvatar, NSelect, NInputNumber
} from 'naive-ui'
import api from '@/api'
const vPermission = resolveDirective('permission')
const base_path = import.meta.env.VITE_BASE
const message = useMessage()
import default_image from "@/assets/images/mz.jpg"

const data = reactive({
  value: 0,
  customers:[],
  search_customer:'',
  goods:[],
  search_goods:'',
  select_customer:{
    id:0,
    name:"暂未选择",
    phone:"x",
    money_deposit:0
  },
  select_skus:[],
  select_price:0,
  select_goods:[],
  select_goods_nums:[],
  yue:0,
  designers:[],
  select_designers:[],
  select_space:1,
  desc:""
});

onMounted(() => {
  api.getSpaceList().then((res) => (data.option_space = res.data))
  get_customers()
  get_designers()
})
function select_customer(item){
  data.select_customer = item
  message.success('已选择客户:'+item.name)
  get_goods()
}
function get_customers(){
  api.getSaasUserList({
    name:data.search_customer
  }).then((res) => (data.customers = res.data))
}
function get_designers(){
  api.getSettingDesigner().then((res) => (data.designers = res.data))
}
function get_goods(){
  api.getSaasBucklingList({
    name:data.search_goods,
    user_id:data.select_customer.id
  }).then((res) => (data.goods = res.data))
}
function handleChange(value, index){
  data.select_skus = []//选中的商品规则和数量
  data.goods[index].select_nums = value;
    data.goods.map(item => {
      if(item.select_nums>0){
        // message.success('已选择商品:'+item.goods_name)
        data.select_skus.push(
            {
              "id":item.id,
              "buckling_id":item.id,
              "sku_name":item.sku_name,
              "nums":item.select_nums,
              "goods_name":item.goods_name,
            }
        )
      }
    })
}
function on_save(){
  if(!data.select_customer.id){
    message.error('请先选择客户')
    return
  }
  if(data.select_skus.length===0){
    message.error('请先选择划扣项目')
    return
  }
  api.createCases({
    add_uid:0,
    user_id:data.select_customer.id,
    space_id:data.select_space,
    desc:data.desc,
    designer_ids:data.select_designers,
    buckling_data:data.select_skus
  }).then((res) => {
    message.success(res.msg)
    get_goods()
  })

}

</script>

<template>
  <AppPage :show-footer="false">
    <n-grid :cols="3" :x-gap="12" :y-gap="8">
      <n-gi>
        <n-card style="height:100%"  content-style="padding: 0px;"   title="客户选择" size="small" :segmented="{
          content: true,
          footer: 'soft',
        }" >
          <div style="margin:20px">
            <NInput v-model:value="data.search_customer" size="large" clearable type="text" placeholder="请输入姓名/手机号"
                    @keyup="get_customers()" />
          </div>
          <n-scrollbar style="max-height:500px;padding:0 20px 20px 20px">
            <n-card embedded  v-for="item in data.customers" class="customer_card" hover:card-shadow   size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }"
                    @click="select_customer(item)"
            >
              <template #header>
                <div style="display: flex; align-items: center;">
                  <NAvatar :src="item.avatar" :fallbackSrc="default_image" style="width: 30px; height: 30px; margin-right: 10px;border-radius: 50%" />
                  <span>{{ item.name }}</span>
                </div>
              </template>
              <template #header-extra>
                <NTag type="error" v-if="item===data.select_customer">已选择</NTag>&nbsp;
                <NTag >{{item.role_name}}</NTag>

              </template>
              <template #footer>
                <span color="#ef504e"></span>
                <n-flex justify="space-between" size="large">
                  <div>卡号: <span>{{item.card_no}}</span> </div>
                  <div>电话: <span>{{item.phone}}</span></div>
                </n-flex>
              </template>
            </n-card>
          </n-scrollbar>
        </n-card>
      </n-gi>

      <n-gi>
        <n-card style="height:100%" content-style="padding: 0px;"   title="疗程项目选择" size="small" :segmented="{
          content: true,
          footer: 'soft',
        }">
          <div style="margin:20px">
            <NInput v-model:value="data.search_goods" size="large" clearable type="text" placeholder="请输入商品名称"
                    @keyup="get_goods()" />
          </div>
          <n-scrollbar v-if="data.goods.length>0" style="max-height:500px;padding:0 20px 20px 20px">
            <n-card embedded v-for="(item,index) in data.goods" class="customer_card" hover:card-shadow  size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }">
              <template #header-extra>
                <NTag style="width: 100px" size="large">剩余{{item.last_nums}}次</NTag>
              </template>
              <template #header>
                <div style="display: flex; align-items: center;">
                  <NAvatar :src="item.goods_cover" :fallbackSrc="default_image" style="width: 40px; height: 40px; margin-right: 10px;" />
                  <div style="height:40px;line-height:20px">{{ item.goods_name }}<br><span style="font-size: 12px;color:#747586">{{ item.created_at }}</span></div>
                </div>
              </template>
              <template #footer>
                <n-flex  justify="space-between" size="large" style="width:100%;height:40px;line-height:40px;margin-bottom:5px">
                  <div>规格: <span>{{item.sku_name}}(共{{item.nums}}次)</span> </div>
                  <div> <n-input-number style="width: 100px" :min="0" :max="item.last_nums" v-model:value=item.select_nums @update:value="(value) => handleChange(value, index)" /></div>
                </n-flex>
              </template>
            </n-card>
          </n-scrollbar>
          <n-empty description="该客户暂无疗程卡" v-else style="margin-top: 50px"></n-empty>
        </n-card>
      </n-gi>

      <n-gi>
        <n-card style="height:100%" content-style="padding: 20px;"   title="划扣" size="small" :segmented="{
          content: true,
          footer: 'soft',
        }">
          <n-alert :title="'客户:'+data.select_customer.name+'('+data.select_customer.phone+')'" type="success">
            <div v-for="item in data.select_skus">{{item.good_name}}({{item.sku_name}})x{{item.nums}} </div>
          </n-alert>



          <n-card class="customer_card"  title="技师选择" size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }">
            <template #footer>
              <n-scrollbar style="max-height:220px;padding-right:30px">
                <n-checkbox-group v-model:value="data.select_designers">
                <n-card embedded  v-for="item in data.designers" class="customer_card" hover:card-shadow  size="small" :segmented="{
                    content: true,
                    footer: 'soft',
                  }">

                  <template #footer>
                    <n-flex justify="space-between" size="small" style="width:100%;margin-bottom:5px">
                      <div><n-checkbox size="large" :label="item.name" :value="item.id"/> </div>
                    </n-flex>

                  </template>
                </n-card>
                </n-checkbox-group>
              </n-scrollbar>

            </template>
          </n-card>

          <NSelect

              style="width: 100%;margin-bottom:10px;"
              :options="data.option_space"
              clearable
              placeholder="请选结算门店"
              v-model:value="data.select_space"
          />
          <n-input button-placement="both" style="width: 100%;margin-bottom:10px;" v-model:value="data.desc" size="large" placeholder="备注"/>


          <n-button type="primary" style="float:right" @click="on_save">
            执行划扣
          </n-button>
        </n-card>
      </n-gi>

    </n-grid>
  </AppPage>
</template>


<style>
.customer_card{
  margin: 10px 0;
}
</style>
